import { useSessionStorageState } from 'ahooks'
import _ from 'lodash'
import { Button, Col, Select, Space } from 'antd'
import { DownOutlined } from '@ant-design/icons'

import { TextAreaFilter } from '@/components/TextAreaFilter'
import { selectFilterOption } from '@/utils/utils'
import { useEnterpriseConnectors } from '@oBiz/hooks/SWRApi/useEnterpriseConnectors'
import { defaultParams, useBoundStore } from './store'
import { getSearchFieldName, getShipTrackRequireName, getVisibleFlagName } from './utils'
import styles from './styles.module.less'

export const Filter = () => {
  const reqData = useBoundStore(v => v.reqData)
  const setReqData = useBoundStore(v => v.setReqData)
  const getData = useBoundStore(v => v.getData)
  const [open, setOpen] = useSessionStorageState(`fba_${$APP}_bizTrackEventFilterOpen`, { defaultValue: false })
  const enterpriseConnectorsRes = useEnterpriseConnectors()

  const handleQuery = () => {
    setReqData({ page: 1 })
    getData(true)
  }

  const getBtns = (span: number) => (
    <Col span={span} className={styles.Filter_btns}>
      <Space size={4}>
        <Button
          onClick={() => {
            setReqData({ ..._.omit(defaultParams, ['size']), page: 1 })
            getData(true)
          }}
        >
          重置
        </Button>
        <Button type="primary" onClick={handleQuery}>
          查询
        </Button>
        <Button type="link" onClick={() => setOpen(!open)}>
          {open ? '收起' : '展开'}
          <DownOutlined rotate={open ? 180 : 0} />
        </Button>
      </Space>
    </Col>
  )

  return (
    <div>
      <div className={open ? styles.openFilter : ''}>
        <Space wrap size={18}>
          <Space size={8} direction="vertical">
            <Space.Compact style={{ width: '100%' }}>
              <Select
                style={{ width: '100px' }}
                placeholder="请选择"
                allowClear
                showSearch
                defaultValue={1}
                options={getSearchFieldName.valueList.map(d => ({ label: getSearchFieldName(d), value: d }))}
                filterOption={selectFilterOption}
                value={reqData.searchField}
                onChange={v => setReqData({ searchField: v ?? undefined })}
              />
              <TextAreaFilter
                style={{ width: '100%' }}
                placeholder="请输入运单号"
                textAreaPlaceholder="多个运单号请换行"
                value={reqData.searchWords}
                onChange={v => setReqData({ searchWords: v || undefined })}
              />
            </Space.Compact>
          </Space>
          <Space size={8}>
            <span>客户</span>
            <Select
              style={{ width: 200 }}
              placeholder="请选择客户"
              allowClear
              showSearch
              mode="multiple"
              maxTagCount="responsive"
              maxTagTextLength={2}
              maxTagPlaceholder={omitted => `+${omitted.length}项`}
              loading={enterpriseConnectorsRes.loading}
              options={enterpriseConnectorsRes.data?.list.map(d => ({ label: d.$showName, value: d.id }))}
              filterOption={selectFilterOption}
              value={reqData.customerIds}
              onChange={v => setReqData({ customerIds: v ?? undefined })}
            />
          </Space>
          <Space size={8}>
            <span>客户可见</span>
            <Select
              style={{ width: 200 }}
              placeholder="请选择对应状态组"
              allowClear
              showSearch
              options={getVisibleFlagName.valueList.map(d => ({ label: getVisibleFlagName(d), value: d }))}
              filterOption={selectFilterOption}
              value={reqData.visibleFlag}
              onChange={v => setReqData({ visibleFlag: v ?? undefined })}
            />
          </Space>
          <Space size={8}>
            <span>同步ShipTrack</span>
            <Select
              style={{ width: 200 }}
              placeholder="请选择同步ShipTrack"
              allowClear
              options={getShipTrackRequireName.valueList.map(d => ({ label: getShipTrackRequireName(d), value: d }))}
              filterOption={selectFilterOption}
              value={reqData.shipTrackRequire}
              onChange={v => setReqData({ shipTrackRequire: v ?? undefined })}
            />
          </Space>
        </Space>
        <Space size={6}>
          <Button
            onClick={() => {
              setReqData({ ..._.omit(defaultParams, ['size']), page: 1 })
              getData(true)
            }}
          >
            重置
          </Button>
          <Button type="primary" onClick={handleQuery}>
            查询
          </Button>
          {/* <Button type="link" onClick={() => setOpen(!open)}>
            {open ? '收起' : '展开'}
            <DownOutlined rotate={open ? 180 : 0} />
          </Button> */}
        </Space>
      </div>
    </div>
  )
}
